<template>
    <div class="lecturersdetial">
        <div class="lecturersdetial-head">
            <div class="Teachersdetails-info-left" v-for="(item,index) in HelpInfo" :key="index">
                <label >
                    <img :src="item.cover" alt="">
                </label>
                <label>
                    <span>{{item.nick_name}}</span>
                    <span>中国·杭州</span>
                </label>
            </div>
            <div class="Teachersdetails-info-right" v-for="(item,index) in HelpInfo" :key="index">
                    <label>
                        <span>最近课程：</span>
                        <!-- <span>{{item.map.latelyclass[0].start_time}}</span> -->
                    </label>
                    <label>
                        <span>累计学生：</span>
                        <span>{{item.map.studentCount}}</span>
                        <span>当前学生：</span>
                        <span>{{item.map.currentStudentCount}}</span>
                    </label>
                    <label class="classinfos">
                        <span>累计课时：</span>
                        <span>{{item.map.courseCount}}</span>
                        <span>本月课时：</span>
                        <span>{{item.map.classCount}}</span>
                        <span>剩余课时：</span>
                        <span>{{item.map.residueCount}}</span>
                    </label>
                    <label>
                        <span>入驻时间：</span>
                        <span>{{item.create_time}}</span>
                    </label>
                </div>
        </div>
        <div class="Whetherappointment">
            <ul :style="WhetherappointmentList.length == 1?'width:19%;':''">
                <li v-for="(item,index) in WhetherappointmentList" :key="index" @click="Whether(index)" :class="WhetherappointmentListindex == index?'Whethercalss':''" :style="WhetherappointmentList.length == 1?'width:100%;':''">
                    {{item}}
                </li>
            </ul>
        </div>
        <div class="lecturersdetial-content">
            <div class="lecturersdetial-nav">
                <ul>
                    <li 
                    v-for="(navitem,navindex) in HelpNav" 
                    :key="navindex" 
                    @click="Tochose(navindex)"
                    :class="HelpNavIndex == navindex?'navsed':''"
                    >
                        {{navitem}}
                    </li>
                </ul>
            </div>
            <div class="lecturersdetial-contents" v-if="HelpNavIndex == 0">
                <div class="lecturersdetial-contents-left" v-for="(iteminfo,infoindex) in HelpInfo" :key="infoindex">
                    <h3>基本信息</h3>
                    <label>
                        <span>性别：</span>
                        <span v-if="iteminfo.sex == 1">男</span>
                        <span v-else>女</span>
                    </label>
                    <label>
                        <span>国籍：</span>
                        <span>{{iteminfo.nationality}}</span>
                    </label>
                    <label>
                        <span>掌握语言：</span>
                        <span>{{iteminfo.language}}</span>
                    </label>
                    <label>
                        <span>身份：</span>
                        <span>{{iteminfo.identity}}</span>
                    </label>
                    <label>
                        <span>毕业学校：</span>
                        <span>{{iteminfo.graduation_school}}</span>
                    </label>
                    <label>
                        <span>学历：</span>
                        <span>{{iteminfo.education}}</span>
                    </label>
                    <label>
                        <span>专业：</span>
                        <span>英语</span>
                    </label>  
                </div>
                <div class="lecturersdetial-contents-right" v-for="(iteminfoq,infoindexq) in HelpInfo" :key="infoindexq">
                    <h3>助学师视频</h3>
                    <ul>
                        <li 
                        v-for="(iteminfos,iteminfosindex) in iteminfoq.recommend_video[0]"
                        :key="iteminfosindex"
                        
                        >
                        <div class='demo'>
                            <video-player class="video-player vjs-custom-skin"
                                        ref="videoPlayer"
                                        :playsinline="true"
                                        :options="playerOptions[iteminfosindex]">
                            </video-player>
                        </div>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="lecturersdetial-contentfs" v-else-if="HelpNavIndex ==1">
                <div>
                    <ul v-if="ThecurriculumList.length == 0" class="Thecurriculum">
                        <div  class="Summarylist-nodatads">
                            <label>
                                <img src="/images/圆角矩形 523@2x.png" alt="">
                                <span>暂无课程安排</span>
                            </label>
                        </div>
                    </ul>
                    <ul class="Thecurriculum" v-else>
                        <li v-for="(Thecurriculum,Thecurriculumindex) in ThecurriculumList" :key="Thecurriculumindex">
                            <label>
                                <span>{{Thecurriculum.create_time}}</span>
                                <span>{{Thecurriculum.start_time}}-{{Thecurriculum.end_time}}</span>
                            </label>
                            <label>
                                <span @click="toYuyue(Thecurriculum)">点击预约</span>
                            </label>
                        </li>
                    </ul>
                </div>
                <div class="Lvie-cl-de-con-pagination">
                    <el-pagination @current-change="handleCurrentChange" :currentPage='currentPage' background layout="prev, pager, next" :total="1000"></el-pagination>
                </div>
            </div>
            <div class="lecturersdetial-contentfs" v-else-if="HelpNavIndex ==2">
                <div class="Historytimetable-class-List">
                    <ul v-if="crossborderHlep.length == 0" class="Thecurriculum">
                        <div  class="Summarylist-nodatads">
                            <label>
                                <img src="/images/圆角矩形 523@2x.png" alt="">
                                <span>暂无已结束课程</span>
                            </label>
                        </div>
                    </ul>
                    <ul v-else>
                        <li v-for="(item,index) in crossborderHlep" :key="index" @click="todetile(item)">
                           <div class="Historytimetable-class-List-content">
                                <label>
                                    <img :src="item.map.userinfo.avatar" alt="" style="max-width: 80%;">
                                </label>
                                <label class="Historytimetable-class-Info">
                                    <label class="Personalschedule-class-info-head">
                                        <span>{{item.title}}</span>
                                    </label>
                                     <label>
                                        <img src="/images/椭圆 30 拷贝@2x.png" alt="" class="PersonaltrainingLis-cover">
                                        <span>{{item.map.userinfo.nick_name}}</span>
                                    </label>
                                    <label>
                                        <span>{{item.times}}</span>
                                        <span>{{item.starttime}}-{{item.endtime}}</span>
                                    </label>
                                     <label class="PersonaltrainingList-operation">
                                        <span>总结</span>
                                        <span>评论</span>
                                    </label>
                                </label>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="Lvie-cl-de-con-pagination">
                    <el-pagination @current-change="Gethistorys" :currentPage='currentPage' background layout="prev, pager, next" :total="1000"></el-pagination>
                </div>
            </div>
            <div class="lecturersdetial-contentfs"  v-else-if="HelpNavIndex ==3">
                <ul v-if="Commits.length == 0" class="Thecurriculum">
                    <div  class="Summarylist-nodatads">
                        <label>
                            <img src="/images/圆角矩形 523@2x.png" alt="">
                            <span>暂无评论</span>
                        </label>
                    </div>
                </ul>
                <ul class="lecturersdetial-commit">
                    <li v-for="(comititem,comitindex) in Commits" :key="comitindex">
                        <h3>{{comititem.map.appointmentinfo.title}}</h3>
                        <label><span>{{comititem.create_time}}</span></label>
                        <div class="commit-cont">
                            <div class="comments-content">
                                <label>
                                    <label>
                                        <img :src="comititem.map.userinfo.avatar" alt="">
                                    </label>
                                    <label>
                                        <span>{{comititem.map.userinfo.nick_name}}</span>
                                        <span>{{comititem.content}}</span>
                                        <span>2小时前</span>
                                    </label>
                                </label>
                            </div>
                            <div class="reply-content" v-if="comititem.map.subComment.length!=0">
                                <label v-for="(respal,replayindex) in comititem.map.subComment" :key="replayindex">
                                    <label>
                                        <img :src="respal.map.replyinfo.avatar" alt="">
                                    </label>
                                    <label class="reply-infos">
                                        <span>{{respal.map.userinfo.nick_name}}</span>
                                        <span style="color:#C2C2C2">回复</span>
                                        <span>{{respal.map.replyinfo.nick_name}}</span>
                                        <span>{{respal.content}}</span>
                                        <span class="toreplys" @click="ToRepalsy(notes)">回复</span>
                                        <span class="replaystimed">2小时前</span>
                                        <div class="replay" v-show="IsReplay">
                                            <input type="text" name="" id="">
                                            <span>回复</span>
                                        </div>
                                    </label>
                                </label>
                            </div> 
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <!-- 预约课程弹窗 -->
        <div class="dialog" v-if="isYuyue">
            <h3 class="title">课程预约</h3>
            <label class="Createcourse-data">
                <span>
                 主题
                </span>
                <el-cascader v-model="Thethemevalue" :options="Thetheme" @change="handleChange"></el-cascader>
            </label>
            <label class="Createcourse-data">
                <span>学习语言</span>
                <el-select v-model="languageEn" @change="chooselanguage">
                    <el-option 
                    v-for="item in languageEns" 
                    :key="item.value" 
                    :label="item.key" 
                    :value="item.key"
                   ></el-option>
                </el-select>
            </label>
            <label class="Createcourse-data">
                <span> 日期</span>
                <span>{{yuYueDate}}</span>
            </label>
            <label class="Createcourse-data">
                <span> 时间</span>
                <span>{{yuYueTime}}</span>
            </label>
            <label class="Createcourse-data">
                <span> 外教超市认证讲师</span>
                <span>{{yuYueName}}</span>
            </label>
            <div class="dialogButton" style="left: 110px;" @click="dialogButton(1)">取消</div>
            <div class="dialogButton" style="left: 310px;" @click="dialogButton(2)">确认</div>
        </div>
        <div class="dialogMask" v-if="isYuyue" @click="dialogButton(1)">

        </div>
    </div>
</template>
<script>
export default {
    name:'lecturersdetial',
    props:{
        routerData:String
    },
    data(){
        return{
            // WhetherappointmentList:['私教','专业助学师','母语助学师','跨境助学师'],
            WhetherappointmentList:[],
            WhetherappointmentListindex:'',
            unserinfo:JSON.parse(localStorage.getItem('userinfo')),
            HelpInfo:[],
            HelpNav:['基本信息','课程表','历史课程','评论'],
            HelpNavIndex:0,
            playerOptions:[],
            currentPage:1,
            ThecurriculumList:[],
            crossborderHlep:[],
            Commits:[],
            IsReplay:false,
            isYuyue:false,
            Thethemevalue: "",
            languageEn:[
                {"Estonian":"爱沙尼亚语"},
				{"Arabic":"阿拉伯语"},
				{"Bulgarian":"保加利亚语"},
				{"polish":"波兰语"},
				{"Danish":"丹麦语"},
				{"German":"德语"},
				{"Russian":"俄语"},
				{"Traditional Chinese":"繁体中文"},
				{"French":"法语"},
				{"Finnish":"芬兰语"},
				{"Korean":"韩语"},
				{"Dutch":"荷兰语"},
				{"Czech":"捷克语"},
				{"romanian":"罗马尼亚语"},
				{"Portuguese":"葡萄牙语"},
				{"Japanese":"日语"},
				{"Swedish":"瑞典语"},
				{"slovenian":"斯洛文尼亚语"},
				{"Thai":"泰语"},
				{"Spanish":"西班牙语"},
				{"Greek":"希腊语"},
				{"hun":"匈牙利语"},
				{"Italian":"意大利语"},
				{"English":"英语"},
				{"Vietnamese":"越南语"},
				{"cantonese":"粤语"},
				{"Chinese":"中文"}
            ],
            languageEns:[
                {value:"Estonian",key:"爱沙尼亚语"},
				{value:"Arabic",key:"阿拉伯语"},
				{value:"Bulgarian",key:"保加利亚语"},
				{value:"polish",key:"波兰语"},
				{value:"Danish",key:"丹麦语"},
				{value:"German",key:"德语"},
				{value:"Russian",key:"俄语"},
				{value:"Traditional Chinese",key:"繁体中文"},
				{value:"French",key:"法语"},
				{value:"Finnish",key:"芬兰语"},
				{value:"Korean",key:"韩语"},
				{value:"Dutch",key:"荷兰语"},
				{value:"Czech",key:"捷克语"},
				{value:"romanian",key:"罗马尼亚语"},
				{value:"Portuguese",key:"葡萄牙语"},
				{value:"Japanese",key:"日语"},
				{value:"Swedish",key:"瑞典语"},
				{value:"slovenian",key:"斯洛文尼亚语"},
				{value:"Thai",key:"泰语"},
				{value:"Spanish",key:"西班牙语"},
				{value:"Greek",key:"希腊语"},
				{value:"hun",key:"匈牙利语"},
				{value:"Italian",key:"意大利语"},
				{value:"English",key:"英语"},
				{value:"Vietnamese",key:"越南语"},
				{value:"cantonese",key:"粤语"},
				{value:"Chinese",key:"中文"}
            ],
            Thetheme: [
                {
                value: "Scene",
                label: "场景",
                children: [
                    {
                    value: "Restaurant",
                    label: "餐馆"
                    },
                    {
                    value: "Post Office",
                    label: "邮局"
                    },
                    {
                    value: "Hospital and health scene",
                    label: "医院及健康场景"
                    },
                    {
                    value: "Hotel",
                    label: "酒店"
                    },
                    {
                    value: "Shopping mall",
                    label: "商场购物"
                    },
                    {
                    value: "Work and work scenes",
                    label: "工作和上班场景"
                    },
                    {
                    value: "Airport",
                    label: "机场"
                    },
                    {
                    value: "Farm",
                    label: "农场"
                    },
                    {
                    value: "Campus",
                    label: "校园"
                    },
                    {
                    value: "Travel",
                    label: "旅行"
                    },
                    {
                    value: "Supermarket",
                    label: "超市"
                    },
                    {
                    value: "Drive",
                    label: "驾驶"
                    },
                    {
                    value: "Wedding",
                    label: "婚礼"
                    },
                    {
                    value: "Cinema",
                    label: "电影院"
                    },
                    {
                    value: "Entertainment place",
                    label: "娱乐场所"
                    },
                    {
                    value: "Gymnasium",
                    label: "体育馆"
                    },
                    {
                    value: "Museum",
                    label: "博物馆"
                    },
                    {
                    value: "Bar or KTV",
                    label: "酒吧或KTV"
                    }
                ]
                },
                {
                value: "Topic",
                label: "主题",
                children: [
                    {
                    value: "Self introduction",
                    label: "自我介绍"
                    },
                    {
                    value: "Learning and education",
                    label: "学习教育"
                    },
                    {
                    value: "Talk about music",
                    label: "聊聊音乐"
                    },
                    {
                    value: "Talk about family",
                    label: "聊聊家人"
                    },
                    {
                    value: "Talk about dressing",
                    label: "聊聊穿着"
                    },
                    {
                    value: "Talk about friends",
                    label: "聊聊朋友"
                    },
                    {
                    value: "Talk about delicious food",
                    label: "聊聊美食"
                    },
                    {
                    value: "Festivals and customs",
                    label: "节日和习俗"
                    },
                    {
                    value: "Talk about variety show",
                    label: "聊聊综艺节目"
                    },
                    {
                    value: "Talk about the near future plan",
                    label: "聊聊近期计划"
                    },
                    {
                    value: "Talking about hobbies",
                    label: "聊聊爱好"
                    },
                    {
                    value: "Talk about learning",
                    label: "聊聊学习"
                    },
                    {
                    value: "Talk about TV series",
                    label: "聊聊电视剧"
                    },
                    {
                    value: "Talk about movies",
                    label: "聊聊电影"
                    },
                    {
                    value: "Talk about work",
                    label: "聊聊工作"
                    },
                    {
                    value: "How to learn the language well",
                    label: "怎么学好这个语言"
                    },
                    {
                    value: "About tourism",
                    label: "关于旅游"
                    },
                    {
                    value: "Talk about geography",
                    label: "聊聊地理"
                    },
                    {
                    value: "Talking about ideals",
                    label: "谈谈理想"
                    },
                    {
                    value: "Talk about love",
                    label: "聊聊爱情"
                    },
                    {
                    value: "Talk about the weather",
                    label: "聊聊天气"
                    },
                    {
                    value: "Talk about some interesting things",
                    label: "聊一些趣事"
                    }
                ]
                }
            ],
            yuYueDate:'',
            yuYueTime:'',
            yuYueName:'',
            master_id:'',
            end_time:'',
            start_time:'',
            appointment_id:'',

        }
    },
    created:function(){
        this.GetHelpInfo()
    },
    methods:{
        GetHlepInfos(){
            var data ={
                user_id:this.$route.query.routerData == undefined ? this.userid : this.$route.query.routerData,
                status:2
            }
            this.$axios({
                method:'get',
                url:'http://101.37.66.151:8768/eg-api/user/masterInfo/queryTeachingCenter',
                params:data,
            }).then((res) =>{
                // console.log(res.data.data,'获取多重身份')
                // this.WhetherappointmentList = []
                // console.log(this.WhetherappointmentList,'载入之前')
                // res.data.data.map(item=>{
                //     if(item.map.mastertype.name !== '私教' && item.map.mastertype.name !== '直播讲师'){
                //         this.WhetherappointmentList.push(item.map.mastertype.name)
                //     }
                // })
                // console.log(this.WhetherappointmentList,'身份导航')
            }).catch((error) =>{
                console.log(error)
            })
        },
        Whether(e){
            this.WhetherappointmentListindex = e
            
        },
        dialogButton(e){
            if(e == 1){
                this.isYuyue = false
                this.yuYueDate = ''
                this.yuYueTime = ''
                this.yuYueName = ''
                this.Thethemevalue = ''
                this.languageEn = ''
                this.master_id = ''
                this.end_time = ''
                this.start_time = ''
                this.appointment_id = ''
            }else if (e == 2){
                this.languageEns.map(item=>{
                    if(this.languageEn == item.key){
                        this.languageEn = item.value
                    }
                })
                let data = {
                    appointment_id : this.appointment_id,
                    end_time : this.yuYueDate + ' ' + this.end_time + ':59',
                    language : this.languageEn,
                    master_id : this.master_id,
                    master_type : "mother_tongue",//major 专业,cross_border 跨境,mother_tongue 母语
                    offset : "+8",
                    start_time : this.yuYueDate + ' ' + this.start_time + ':00',
                    title : this.Thethemevalue[0] + '/' + this.Thethemevalue[1],//"Topic/Festivals and customs",
                    user_id : this.unserinfo.user_id,
                    status :2,
                }
                console.log(data)
                this.$axios({
                    method:'POST',
                    url:'http://101.37.66.151:8768/eg-api/user/userAppointment/insert',
                    data:data,
                }).then((res) =>{
                    console.log(res.data.data)
                    if(res.data.code == 0 ){
                        this.dialogButton(1)
                        this.$message({message:'预约成功',type:'success'})
                    }else if (res.data.code == 40006){
                        this.$message({message:res.data.message,type:'warning'})
                        this.dialogButton(1)
                    }else {
                        this.$message({message:res.data.message,type:'warning'})
                    }
                }).catch((error) =>{
                    console.log(error)
                })
            }
        },
        chooselanguage(){
            this.languageEns.map(item=>{
                if(item.key == this.languageEn){
                    this.yuyan = item.value
                }
            })
            console.log(this.yuyan)
            this.getallClassList()
        },
        handleChange(value) {
            //主题选择
            console.log(value);
            this.title = value[0] + "/" + value[1];
        },
        toYuyue(e){
            console.log(e,'预课')
            this.isYuyue = true
            this.yuYueDate = e.create_time
            this.yuYueTime = e.start_time + '~' + e.end_time
            this.yuYueName = e.map.masterInfo.full_name
            this.master_id = e.map.masterInfo.user_id
            this.end_time = e.end_time
            this.start_time = e.start_time
            this.appointment_id = e.id
        },
        GetHelpInfo(){
            console.log(this.routerData,'wuwuwuw')
            var _this = this
            var data ={
                user_id	:this.$route.query.routerData == undefined ? _this.routerData : this.$route.query.routerData,
                status:2
            }
            this.$axios({
                method:'get',
                url:'http://101.37.66.151:8768/eg-api/user/masterInfo/queryTeachingCenter',
                params:data,
            }).then((res) =>{
                _this.HelpInfo = []
                console.log(res.data.data,'==i')
                this.WhetherappointmentList = []
                res.data.data.forEach(e => {
                    if(e.map.mastertype.name !== '私教' && e.map.mastertype.name !== '直播讲师'){
                        this.WhetherappointmentList.push(e.map.mastertype.name)
                    }
                    if(e.type == "major"){
                        var arr = []
                        var ss = e.recommend_video.split(',')
                        arr.push(ss)
                        _this.HelpInfo.push(e)
                        arr[0].forEach(vs=>{
                            
                            let arrs = {
                                playbackRates: [0.5, 1.0, 1.5, 2.0], //播放速度
                                autoplay: false,  //如果true,浏览器准备好时开始回放。
                                muted: false, // 默认情况下将会消除任何音频。
                                loop: false, // 导致视频一结束就重新开始。
                                preload: 'auto',   // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
                                language: 'zh-CN',
                                aspectRatio: '16:9',// 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
                                fluid: true,// 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
                                sources: [{
                                    type: "video/mp4",//类型
                                    src: vs //url地址
                                }],
                                poster: '/images/图层 6.png', //你的封面地址
                                notSupportedMessage: '此视频暂无法播放，请稍后再试',//允许覆盖Video.js无法播放媒体源时显示的默认信息。
                                controlBar: {
                                    timeDivider: true,
                                    durationDisplay: true,
                                    remainingTimeDisplay: false,
                                    fullscreenToggle: true //全屏按钮 
                                }
                            }
                            _this.playerOptions.push(arrs)
                        })
                        
                    }
                });
                console.log(_this.HelpInfo,'00')
            }).catch((error) =>{
                console.log(error)
            })
        },
        todetile(item){
            console.log(item)
            // this.$router.push({path:'/views/Teachingcenters/Teachingcentercoursedetails',query: {id: item.map.masterAppointmentEntity.id,Isend:true}})
        },
        Tochose(e){
            this.HelpNavIndex = e
            if(this.HelpNavIndex == 1){
                this.GetThecurriculum()
            }else if(this.HelpNavIndex == 2){
                this.GetHistoryteacher()
            }else if(this.HelpNavIndex == 3){
                this.GetCommits()
            }
        },
        GetThecurriculum(){//获取课程表
            var data = {
                master_id:this.routerData,
                type:'single_class',
                pageSize:12,
                page:this.currentPage
            }
            this.$axios({
                method:'get',
                url:'http://101.37.66.151:8768/eg-api/user/masterAppointment/queryBeginListPage',
                params:data,
            }).then((res) =>{
                console.log(res.data.data,'99i9i9')
                this.ThecurriculumList =res.data.data
                this.ThecurriculumList.forEach(e => {
                    var stars = e.start_time
                    var entimes = e.end_time
                    var times = stars.substring(0, stars.indexOf(' '))//截取当前日期
                    var starttime =  stars.substring(11, 16)//截取开始时间
                    var endtime =  entimes.substring(11, 16)//截取结束时间
                    e['create_time'] = times
                    e['start_time'] = starttime
                    e['end_time'] = endtime
                });
            }).catch((error) =>{
                console.log(error)
            })
        },
        handleCurrentChange(val){
            this.currentPage =val
            this.GetThecurriculum()
        },
        Gethistorys(vale){
            this.currentPage =vale
            this.GetHistoryteacher()
        },
        GetHistoryteacher(){
            alert('aaa')
            var data ={
                page :this.currentPage ,
                pageSize:6,
                type:"single_class",
                master_id:this.routerData
            }
            this.crossborderHlep = []
            this.$axios({
                method:'get',
                url:'http://101.37.66.151:8768/eg-api/user/userAppointment/queryHistoryListPage',
                params:data,
                }).then((res) =>{
                    console.log(res.data.data,'助学师历史课程')
                    this.crossborderHlep = res.data.data
                    this.crossborderHlep.forEach(e=>{
                        var stars = e.start_time
                        var entimes = e.end_time
                        console.log(stars,'wiw')
                        var times = stars.substring(0, stars.indexOf(' '))//截取当前日期
                        var starttime =  stars.substring(11, 16)//截取开始时间
                        var endtime =  entimes.substring(11, 16)//截取结束时间
                        var myDate = new Date(Date.parse(times));  
                        e.times = times
                        e.starttime = starttime
                        e.endtime = endtime
                    })
                }).catch((error) =>{
                    console.log(error)
            })
        },
        GetCommits(){
            var data ={
                currentPage :this.currentPage,
                pageSize  :3,
                parent_id:0,
                master_id:this.routerData
            }
            this.$axios({
                method:'get',
                url:'http://101.37.66.151:8768/eg-api/user/masterComment/queryListPage',
                params:data,
                }).then((res) =>{
                    console.log(res.data.data,'助学师评论')
                    this.Commits =res.data.data
                }).catch((error) =>{
                    console.log(error)
            })
        },
        ToRepalsy(){//回复评论接口
            this.IsReplay =!this.IsReplay
        }

    }
}
</script>
<style lang="less" scoped>
    .Whethercalss{
        border:1px solid rgba(71,206,207,1);
        border-radius:22px;
        color: #ffffff!important;
        background: #47CECF;
    }
    .Whetherappointment{
        display: flex;
        width: 100%;
        ul{
            position: relative;
            width: 41%;
            margin: 0 auto;
            display: flex;
            margin-top: 40px;
            height: 40px;
            align-items: center;
            justify-content: center;
            padding: 0;
            list-style: none;
            border:1px solid rgba(71,206,207,1);
            border-radius:22px;
            li{
                width: 50%;
                height: 40px;
                line-height: 40px;
                text-align: center;
                color: #47CECF;
                font-size: 16px;
                cursor: pointer; 
            }
        }
    }
    .dialogButton{
        color: #fff;
        position: absolute;
        width: 100px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        background-color: #47cecf;
        border-radius: 10px;
        top: 330px;
        cursor: pointer;
    }
    .Createcourse-data{
        height: 45px;
        align-items: center;
        /deep/.el-date-editor{
            width: 50%;
            border: #CECECE;
        }
        
        /deep/.el-select{
            width: 50%;
            border: #CECECE;  
        }
        /deep/ .el-cascader {
            width: 250px;
        }
    }
    .dialog{
        z-index: 1002;
        position: fixed;
        top: 100px;
        left: 50%;
        width: 500px;
        height: 400px;
        margin-left:-250px;
        background: #fff;
        border-radius: 15px;
        label{
            display: flex;
            width: 100%;
            span{
                width: 26%;
                margin-left: 18px;
                margin-right: 30px;
            }
        }
        .title{
            text-align: center;            
        }
    }
    .dialogMask{
        z-index: 1001;
        position: fixed;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        background: #000;
        opacity: 0.7;
    }
    .lecturersdetial{
        position: relative;
        width: 90%;
        height: auto;
        margin: 0 auto;
    }
    .lecturersdetial-head{
        position: relative;
        width: 100%;
        margin: 0 auto;
        height: 190px;
        background:rgba(241,241,241,1);
        border-radius:15px;
        margin-top: 40px;
        display: flex;
        align-items: center;
        div{
            width: 50%;
            height: 100%;
        }
    }
    .Teachersdetails-info-left{
        width: 50%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        label{
            display: flex;
            flex-wrap: wrap;
            width: 100%;
            align-items: center;
            justify-content: center;
            img{
                width: 103px;
                height: 103px;
                border-radius: 50px;
            }
            span{
                width: 100%;
                height: 40px;
                line-height: 40px;
                padding-left: 20%!important;
            }
        }
    }
    .Teachersdetails-info-left>label>span:first-child{
        color: #2B2B2B;
        font-weight: bold;
        font-size: 20px;
    }
    .Teachersdetails-info-left>label>span:last-child{
        color: #AFAFAF;
        font-size: 16px;
        padding-left: 14%;
        background-image: url('/images/定位.png');
        background-repeat: no-repeat;
        background-size: auto;
        background-position-x: 2%;
        background-position-y: 34%;
    }
    .Teachersdetails-info-right{
        width: 50%;
        height: 70%!important;
        display: flex;
        flex-wrap: wrap;
        label{
            width: 100%;
            height: 30px;
            span{
                display: inline-block;
                height: 30px;
                line-height: 30px;
                color: #AFAFAF;
                padding-left: 2%;
                &:nth-child(2n+1){
                    color: #2B2B2B;
                    font-size: 16px;
                    font-weight: bold;
                }
            }
        }
    }
    .lecturersdetial-nav{
        position: relative;
        width: 100%;
        height: 60px;
        border-bottom: 1px solid #e3e3e3;
        margin-top: 60px;
    }
    .lecturersdetial-nav>ul{
        list-style: none;
        display: flex;
        width: 100%;
        height: 60px;
        align-items: center;
        padding: 0;
        li{
            width: 10%;
            cursor: pointer;
            color: #A5A5A5;
            font-size: 16px;
        }
    }
    .navsed{
        color: #313131!important;
        font-weight: bold;
    }
    .lecturersdetial-contents{
        position: relative;
        width: 100%;
        margin: 0 auto;
        display: flex;
    }
    .lecturersdetial-contentfs{
        position: relative;
        width: 100%;
        margin: 0 auto;
    }
    
    .lecturersdetial-contents-left,.lecturersdetial-contents-right{
        width: 50%;
        h3{
            font-size: 14px;
        }
    }
    .lecturersdetial-contents-left>label{
        display: flex;
        width: 100%;
        height: 40px;
        span{
            font-size: 14px;
            &:first-child{
                width: 30%;
                color: #3E3E3E;
            }
            &:last-child{
                color: #B7B7B7;
            }
        }
    }
    .lecturersdetial-contents-right>ul{
        list-style: none;
        display: flex;
        width: 100%;
        padding: 0;
        flex-wrap: wrap;
        li{
            width: 48%;
        }
    }
    .Thecurriculum{
        display: flex;
        width: 100%;
        flex-wrap: wrap;
        list-style: none;
        padding: 0;
        li{
            width: 22%;
            height: 42px;
            border:2px solid rgba(71,206,207,1);
            border-radius:21px;
            margin-top: 20px;
            margin-left: 2%;
            display: flex;
            align-items: center;
            &:nth-child(4n+1){
                margin-left: 0;
            }
        }

    }
    .Thecurriculum>li>label{
        font-size: 12px;
        &:first-child{
            width: 60%;
            text-align: center;
            span{
                display: inline-block;
                width: 50%;
                color: #555555;
            }
        }
        &:last-child{
            width: 40%;
            text-align: center;
            span{
                cursor: pointer;
                color: #29C5C6;
            }
        }
    }
    .Lvie-cl-de-con-pagination{
        position: relative;
        width: 100%;
        height: 100px;
        margin-top: 100px;
        margin-bottom: 40px;
        display: flex;
        justify-content: flex-end;
        margin-right: 100px;
    }
    .Historytimetable-class-List{
        position: relative;
        width: 100%;
        padding-bottom: 40px;
        ul{
            display: flex;
            width: 100%;
            list-style: none;
            padding: 0;
            flex-wrap: wrap;
            justify-content: space-between;
            li{
                width: 48%;
                height: 154px;
                border:1px solid rgba(54,205,206,1);
                border-radius:5px;
                margin-top: 20px;
                cursor: pointer;
            }
        }
    }
    .Historytimetable-class-List-content{
        position: relative;
        width: 90%;
        margin: 0 auto;
        display: flex;
        height: 100%;
        align-items: center;
    }
    .Historytimetable-class-List-content>label:first-child{
        width: 50%;
        border-radius: 15px;
        height: 80%;
        overflow: hidden;
        img{
            width: auto;
            height: auto;
            max-width: 100%;
        }
    }
    .Historytimetable-class-Info{
        width: 50%;
        height: 90%; 
        padding-left: 6%;
        label{
            display: flex;
            // justify-content: space-between;
            font-size: 14px;
            height:auto;
            line-height: 24px;
            margin-top: 8px;
            span{
                display: inline-block;
                width: auto;
                &:first-child{
                    width: auto;
                }
                &:last-child{
                    margin-left: 4%;
                }
            }
        }
    }
    .Historytimetable-class-Info>.Historytimetable-class-Infos{
        margin-top: 10px;
        
    }
    .PersonaltrainingLis-cover{
        width: 12px;
        height: 14px;
        margin-top: 2%;
    }

    .lecturersdetial-commit{
        display: flex;
        width: 100%;
        list-style: none;
        flex-wrap: wrap;
        padding: 0;
        li{
            width: 100%;
        }
    }




    //评论
    .comments-content{
        position: relative;
        width: 86%;
        margin:  0 auto;
    }
    .comments-content>label{
        display: flex;
        width: 100%;
        flex-wrap: wrap;
        margin-top: 30px;
        img{
            width: 34px;
            height: 34px;
            border-radius: 20px;
        }
    }
    .comments-content>label>label,.reply-content>label>label{
        display: flex;
        width: 78%;
        height: 60px;
        align-items: center;
        font-size: 12px;
        &:first-child{
            width: auto;
        }
        &:last-child{
            width: 80%;
            display: flex;
            flex-wrap: wrap;
            span{
                display: inline-block;
                width: 60%;
                height: 20px;
                line-height: 20px;
                margin-left: 2%;
                &:first-child{
                    width: auto;
                }
                &:last-child{
                    color: #C2C2C2;
                }
            }
        }
    }
    .reply-content{
        position: relative;
        width: 76%;
        margin:  0 auto;
    }
    .reply-content>label{
        display: flex;
        width: 100%;
        flex-wrap: wrap;
        min-height: 100px;
        align-items: center;
        background:rgba(246,246,246,1);
        border-radius: 10px;
        img{
            width: 34px;
            height: 34px;
            border-radius: 20px;
            margin-left: 20px;
        }
    }
    .reply-infos{
        width: 80%;
        display: flex;
        flex-wrap: wrap;
        
        align-items: center;
        span{
            width: auto!important;
        }
    }
    .replaystimed{
        width: 80%!important;
        color: #C2C2C2;
    }
    .load-more{
        position: relative;
        width: 100%;
        height: 40px;
        margin-top: 40px;
        text-align: center;
        cursor: pointer;
        line-height: 40px;
        color: #30C4C4;
        font-size: 14px;
    }
    .toreplys{
        margin-left: auto!important ;
        cursor: pointer;
    }
    .toreplys:hover{
        color: red;
    }
    .thereplaysinput{
        position: relative;
        width: 100%;
        /deep/.el-input{
            width: 60%;
            margin-top: 10px;
            margin-left: 2%;
        }
        
    }
    .thereplaysinput>span{
        display: inline-block;
        width: 16%!important;
        height: 40px!important;
        text-align: center!important;
        line-height: 40px!important;
        background: #44c7c7!important;
        border-radius: 10px!important;
        margin-left: 2%!important;
        color: #FFFFFF!important;
        font-size: 12px!important;
        cursor: pointer;
    }
    .replay{
        position: relative;
        width: 100%;
        height: 20px!important;
        input{
            width: 60%;
            height: 20px!important;  
        }
        span{
            display: inline-block;
            width: 10%!important;
            height: 40px!important;
            background: red;

        }
    }
    .Summarylist-nodatads{
        position: relative;
        width: 100%!important;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        label{
            width: 100%;
            text-align: center;
        }
        img{
            width: 39px!important;
            height: 39px!important;
        }
        span{
            display: inline-block;
            width: 100%;
            text-align: center;
            margin-top: 10px;
            color: #e7e7e7;
        }
    }
</style>